<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../resources/common.js"></script>
<body>
<ul>
  <li>Range value=50 with padding: <input type="range" min="0" max="100" value="50" style="padding:20px" /> </li>
  <li>Range value=30 with padding-left: <input type="range" min="0" max="100" value="30" style="padding-left:20px" /> </li>
  <li>Range value=50 with border and padding: <input type="range" min="0" max="100" value="50" style="border: 15px solid blue; padding:20px" /> </li>
  <li>Range vertical value=50 with border and padding: <input type="range" min="0" max="100" value="50" style="border: 15px solid blue; padding:20px; -webkit-appearance: slider-vertical" /> </li>
  <li>Range RTL value=30: <input type="range" min="0" max="100" value="30" style="direction: rtl" /> </li>
  <li>Range RTL value=80 with border and padding: <input type="range" min="0" max="100" value="80" style="border: 15px solid blue; padding:20px; direction: rtl" /> </li>
</ul>